<template>
  <div class="side-nav h-full w-170px" :class="[itemsStyle]">
    <div class="h-full w-full bg-light-50 rounded overflow-hidden">
      <side-nav-item icon="i-carbon-add" label="创建工作"
                     :border-bottom="true" :collapse="collapse"/>
      <side-nav-item icon="i-carbon-alarm" label="我的待办"
                     :collapse="collapse"/>
      <side-nav-item icon="i-carbon-checkmark-outline" label="我的已办"
                     :collapse="collapse"/>
      <side-nav-item icon="i-carbon-folder-add" label="我的创建"
                     :collapse="collapse"/>
      <side-nav-item icon="i-carbon-star" label="我的关注"
                     :collapse="collapse"/>
      <side-nav-item icon="i-carbon-recently-viewed" label="最近访问"
                     :border-bottom="true" :collapse="collapse"/>
      <side-nav-item icon="i-carbon-search-locate" label="筛选查询"
                     :collapse="collapse"/>
    </div>
    <div class="collapse bg-gray-300 w-15px h-50px cursor-pointer center~ text-light-50" @click="setCollapse">
      <div v-if="collapse" class="i-carbon-chevron-left text-sm"></div>
      <div v-else class="i-carbon-chevron-right text-sm"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SideNavItem from "./SideNavItem.vue";
import {useCollapse} from "../hooks"

const {collapse, setCollapse} = useCollapse()
const itemsStyle = computed(() => {
  return collapse.value ? "w-50px" : "w-170px"
})
</script>

<style scoped>
.side-nav {
  position: relative;
  transition: 0.1s;
}

.collapse {
  top: 50%;
  right: -15px;
  border-radius: 0 10px 10px 0;
  position: absolute;
}
</style>